<template>
	<div class="page">
		<div class="logo">
			<img class="logo-img" src="../assets/logo.png" alt="" />
			<div class="right-ic" @click="changeLanguage">
				<img src="../assets/100.png" alt="" />
				<span>{{$i18n.locale == 'zh' ? 'EN' : '中文'}}</span>
			</div>
		</div>
		
		<div class="bg"></div>

		<div class="search" @click="goPage('list')">
			<input type="text" v-model="search" :placeholder="$t('language.search')" />
			<img class="ic" src="../assets/101.png" alt="" />
		</div>
		
		<!-- <div class="title">{{$t('language.introduce')}}</div> -->
		<div class="card">
			<div class="policy" @click="goPage('policy')">
				<img class="ic" src="../assets/102.png" alt="" />
				<span>{{$t('language.text1')}}</span>
			</div>
			
			<div class="card-list">
				<div class="item" @click="goPage('class')">
					<img class="ic" src="../assets/ic-1.png" alt="" />
					<span>{{$t('language.text3')}}</span>
				</div>
				<div class="item"
					@click="goPage('https://wechat.accortech.cn/static/modification/index.html', 1)">
					<img class="ic" src="../assets/ic-2.png" alt="" />
					<span>{{$t('language.text4')}}</span>
				</div>
				<!-- <div class="item" @click="goPage('tips')">
					<img class="ic" src="../assets/ic-3.png" alt="" />
					<span>{{$t('language.text6')}}</span>
				</div> -->
			</div>
		</div>
		<!-- <div class="title">{{$t('language.text7')}}</div> -->
		<div class="card">
			<div class="video-list" v-if="videoList.length > 0">
				<!-- <div class="item" v-for="item in videoList" :key="item.id">
					<div class="bg-img" @click="tapVideo($i18n.locale == 'zh' ? item.cn_url : item.eu_url)"
						v-if="!isShowVideo">
						<img :src="$i18n.locale == 'zh' ? item.cn_logo: item.eu_logo" alt="" />
					</div>
					<video v-else autoplay controls>
						<source :src="$i18n.locale == 'zh' ? item.cn_url : item.eu_url" type="video/mp4">
						您的浏览器不支持 video 标签。
					</video>
				</div> -->
				<div class="item">
					<div class="bg-img" @click="tapVideo(videoList[0].cn_url)"
						v-if="!isShowVideo">
						<img :src="videoList[0].cn_logo" alt="" />
					</div>
					<video v-else autoplay controls>
						<!-- poster -->
						<source :src="videoList[0].cn_url" type="video/mp4">
						您的浏览器不支持 video 标签。
					</video>
				</div>
				<div class="item">
					<div class="bg-img" @click="tapVideo(videoList[0].eu_url)"
						v-if="!isShowVideo">
						<img :src="videoList[0].eu_logo" alt="" />
					</div>
					<video v-else autoplay controls>
						<!-- poster -->
						<source :src="videoList[0].eu_url" type="video/mp4">
						您的浏览器不支持 video 标签。
					</video>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getHelpVideo
	} from '@/api/user';
	// import { login } from '@/api/user';
	let _timer = null
	export default {
		name: 'Index',
		data: function() {
			return {
				locale: 'zh',
				search: '',
				pageId: '',
				isShowVideo: false,
				autoplay: false,
				videoList: [],
				showGrayscale: false
			};
		},
		created() {
			this.getHelpVideoList()
		},
		mounted() {},
		methods: {
			getHelpVideoList() {
				getHelpVideo().then((res) => {
					const {
						list
					} = res.data
					this.videoList = list
				}).catch((err) => {
					console.log(err)
				})
			},
			tapVideo(url) {
				// this.isShowVideo = !this.isShowVideo
				// this.autoplay = !this.autoplay
				this.$router.push({
					path: 'video',
					query: {
						url
					}
				})
			},
			goPage(page, id, status = false) {
				if (status) {
					if(_timer) {
						clearTimeout(_timer)
						_timer == null
					}
					this.showGrayscale = true
					this.pageId = id
					_timer = setTimeout(() => {
						this.showGrayscale = false
						clearTimeout(_timer)
					}, 1000)
					return
				}
				if (page.indexOf('http') >= 0) {
					window.location.href = page
					return
				}
				this.$router.push({
					path: page,
					query: { id }
				})
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					this.$cookies.set('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					this.$cookies.set('locale', 'zh')
				}
			}
		}
	};
</script>
<style type="text/css" lang="scss" scoped>
	.page {
		background-color: #F5F5FA;
	}
	
	.bg {
		width: 100%;
		height: 570px;
		background: url('../assets/109.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 100px;
		left: 0;
	}

	.search {
		position: relative;
		z-index: 10;
		padding: 0 28px;
		margin: 370px 30px 40px;
		height: 88px;
		background-color: #fff;
		border: 1px solid #B78D5B;
		box-sizing: border-box;
		border-radius: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Source Han Sans CN;
		font-weight: 400;

		input {
			font-size: 28px;
			color: #333333;
			width: 100%;
			height: 100%;
		}

		.ic {
			width: 28px;
			height: 28px;
			flex-shrink: 0;
		}
	}
	
	.title {
		display: inline-block;
		height: 58px;
		line-height: 58px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		font-size: 30px;
		margin-left: 30px;
		padding-left: 16px;
		padding-right: 30px;
		background: url('../assets/ic-4.png') no-repeat;
		background-position: right;
		background-size: auto 100%;
		border-radius: 15px 0 0 0;
		overflow: hidden;
	}
	
	
	.card {
		position: relative;
		margin:  0 30px 40px;
		padding: 30px;
		z-index: 10;
		border-radius: 15px;
		background-color: #fff;
		
		.policy {
			height: 120px;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 28px;
			color: #FFFFFF;
			padding-left: 40px;
			display: flex;
			align-items: center;
			background: #060143;
			border-radius: 10px;
			
			.ic {
				display: block;
				width: 56px;
				height: 62px;
				margin-right: 40px;
			}
		}

		.card-list {
			display: flex;
			justify-content: space-between;
			margin-top: 30px;

			.item {
				width: 300px;
				height: 242px;
				font-size: 24px;
				color: #fff;
				text-align: center;
				border-radius: 15px;
				padding: 40px 20px;
				box-sizing: border-box;
				position: relative;
				
				&:nth-child(1) {
					background: #B88D5B;
				}
				
				&:nth-child(2) {
					background: #27666E;
				}
				
				&:nth-child(3) {
					background: #CC4C3C;
				}
				
				span {
					display: inline-block;
					padding-top: 120px;
				}

				.ic {
					position: absolute;
					top: 40px;
					left: 50%;
					transform: translateX(-50%);
					width: 63px;
					height: 72px;
					object-fit: cover;
				}
			}
		}

		.video-list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 4px;
			.item {
				width: 100%;
				height: 356px;
				display: flex;
				align-items: center;
				border-radius: 10px;
				margin-top: 30px;
				overflow: hidden;
				
				&:first-child {
					margin-top: 0;
				}

				.bg-img {
					width: 100%;
					height: 100%;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate3d(-50%, -50%, 0);
						width: 80px;
						height: 80px;
						background: url(../assets/104.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				img,
				video {
					width: 100%;
					height: 100%;
				}

				.ic {
					width: 36px;
					height: 38px;
					object-fit: cover;
				}

				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}
</style>